<template>
    <div class="app_card mt-3  pt-2  pb-5">
        <div style="margin-top: 10px" v-if="queryForm.radio_floor == -1">
            您已选中
            <template v-if="queryForm.radio_floor == -1">全部</template>
            <template v-else-if="queryForm.radio_floor == -2">上课中</template>
            <template v-if="queryForm.radio_floor == -3">故障教室</template>
            <span style="font-weight: bold">{{ checkedSelected ? paginationOption.totalCount : 0 }}个教室</span>
        </div>

        <el-table ref="tableRef" @selection-change="(e) => emit('onSelection', e)" v-loading="loading"
            element-loading-text="查询中..." stripe size="large" :data="dataOfTable" height="calc(100vh - 300px)">
            <el-table-column fixed type="selection" width="50" />
            <el-table-column fixed prop="id" label="序号" width="80" align='center' />
            <el-table-column prop="name" label="教室" width="120" align='center' />

            <el-table-column align='center' v-for="(item, index) in equipmentsList" :key="index" :label="item.label"
                minWidth="90">
                <template #default="scope">
                    <el-switch size="large" disabled v-model="scope.row[item.prop]" inline-prompt active-value="1"
                        inactive-value="0" active-text="开" inactive-text="关" />
                </template>
            </el-table-column>
            <!-- <el-table-column label="温湿度" minWidth="130" align='center'>
        <template #default="scope">
          {{scope.row.temperature}}℃ <span class="mx-1">|</span>{{scope.row.humidity}}%
        </template>
      </el-table-column>
      <el-table-column label="PM25" minWidth="100">
        <template #default="scope">
          {{scope.row.pm25}}μg
        </template>
      </el-table-column>
      <el-table-column label="CO2" minWidth="100">
        <template #default="scope">
          {{scope.row.co2}}
        </template>
      </el-table-column>
      <el-table-column label="当天能耗" minWidth="100">
        <template #default="scope">
          <font color="#FF8800">{{scope.row.energy}}kws</font>
        </template>
      </el-table-column> -->
            <el-table-column prop="status" label="使用状态" width="100" align='center'>
                <template #default="scope">
                    <!--
            包含两种。online为0的连接故障和status小于0的其他故障。
            inUse 表示上下课，online表示教室是否课用。
            故障和报修没有关系，故障状态Status，小于0就是设备出现故障，online是判断设备是否在线，0是不在，1是在
             -->
                    <template v-if="scope.row.status < 0">
                        <img src="@/assets/img/bug.svg" width="16" class="v-sub">
                        <font color="#FFBB00">故障</font>
                    </template>
                    <template v-else>
                        {{ scope.row.inUse == '1' ? '上课' : '下课' }}
                    </template>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="物联管理" width="120" align="center">
                <template #default="scope">
                    <el-button link type="primary" @click="onLink(scope.row)">跳转</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="mt-2">
            <el-pagination background v-model:currentPage="queryParam.page" v-model:page-size="queryParam.limit"
                :page-sizes="paginationOption.pageSizes" :background="false" :layout="paginationOption.layout"
                :total="paginationOption.totalCount" @size-change="handleChangeSize"
                @current-change="handleChangeCurrent" />
        </div>
    </div>
</template>
<script setup>
/**
 * 列表控制
 */
import { ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import { getNewObj } from '@/utils/EsCommon';
// ======================================================
//                      变量声明
// ======================================================
const emit = defineEmits(['goIot', 'setListContent', 'goRoom', 'onSelection']);
// 组件引用
const paginationRef = ref(null);
const tableRef = ref(null);
//全选
const checkedSelected = ref(false);
// 表格数据
const loading = ref(false);
const dataOfTable = ref([]);
// 表格查询参数
const queryForm = ref({
  buildingId: "",
  radio_floor: "",
  floorId:''
})
// 表格查询参数
const queryParam = ref({
    sort: "Id",
    order: "asc",
    limit: 12,
    page: 1,
})

// 表格多选数据
const multipleSelection = ref([]);

// 点击行内编辑按钮
const onLink = (row) => {
    emit('goRoom', row);
}

// ======================================================
//                      处理事件
// ======================================================

// 处理表格全选
const handleSelectionChange = (val) => {
    multipleSelection.value = val
}
const equipmentsList = ref([
    // { prop: "equipmentType1", type: '1', label: "灯泡", value: '0' },
    // { prop: "equipmentType2", type: '2', label: "空调", value: '0' },
    // { prop: "equipmentType3", type: '3', label: "窗帘", value: '0' },
    { prop: "equipmentType4", type: '4', label: "投影", value: '0' },
    { prop: "equipmentType10", type: '10', label: "幕布", value: '0' },
    { prop: "equipmentType6", type: '6', label: "计算机", value: '0' },
    { prop: "equipmentType9", type: '9', label: "功放", value: '0' },
    { prop: "equipmentType15", type: '15', label: "录播", value: '0' },
]);

// ======================================================
//                      处理事件
// ======================================================

const onRefresh = (query) => {
  checkedSelected.value = false
  let { buildingId = "", radio_floor = "",floorId = '' } = query
  console.log(floorId)
  if (buildingId) {
    queryForm.value.buildingId = buildingId
  }
  if (radio_floor) {
    queryForm.value.radio_floor = radio_floor
  }
  if (floorId) {
    queryForm.value.floorId = floorId
  }
  roomFetch();
}
const roomFetch = () => {
    multipleSelection.value = []
    queryParam.value.page = 1;
    paginationOption.value.totalCount = 0
    emit('setListContent', 0)
    loadData()
}

// 分页栏配置数据
const paginationOption = ref({
    layout: 'total, sizes, prev, pager, next, jumper',
    pageSizes: [12, 24, 36, 48, 60, 72, 84, 96],
    totalCount: 0,

})


// 处理分页尺寸
const handleChangeSize = (val) => {
    queryParam.value.page = 1;
    queryParam.value.limit = val;
    loadData()
}

// 处理页码
const handleChangeCurrent = (val) => {
    queryParam.value.page = val;
    loadData()
}

const loadData = () => {
    dataOfTable.value = []
    let _queryParam = queryParam.value
    _queryParam.query = ''
    if (queryForm.value.buildingId) {
        _queryParam.query = "buildingId=" + queryForm.value.buildingId+ ',floorId=' + queryForm.value.floorId;
    }
    _queryParam.offset = (_queryParam.page - 1) * _queryParam.limit || 0;
console.log(queryForm.value)
    loading.value = true
    let url = ApiUrls.roomSearch
    if (queryForm.value.radio_floor == '-2') {//上课中
        url = ApiUrls.roomInclass
    } else if (queryForm.value.radio_floor == '-3') {//故障
        url = ApiUrls.roomFault
    }else if (queryForm.value.radio_floor == '-4') {//故障
        url = ApiUrls.roomFree
    }
    EsAjax.post(url, _queryParam).then(res => {
        if (res.data.code != 200) {
            ElMessage.warning(res.data.data + res.data.msg);
            return;
        }
        let { list, totalCount } = res.data.data
        if (list && list.length) {
            list.forEach(element => {
                element.isCheck = false
                // <!-- 1-灯光；2-空调；3-窗帘；4-投影仪；5-幕布；6-电脑一体机；7-录播主机；8-大屏；9-功放；10-六合一传感器；11-电流电压传感器；12-触摸屏；13-ip电话；14-电子班牌；15-门禁；16-学生摄像头；17-老师摄像头 -->
                element.equipmentType1 = '0'
                element.equipmentType2 = '0'
                element.equipmentType3 = '0'
                element.equipmentType4 = '0'
                element.equipmentType5 = '0'
                element.equipmentType6 = '0'
                element.equipmentType9 = '0'
                element.equipmentType15 = '0'
                if (element.equipments && element.equipments.length) {
                    element.equipments.forEach(equi => {
                        equipmentsList.value.forEach(_equi => {
                            if (_equi.type == equi.type) {
                                _equi.label = equi.equipmentName
                                element[_equi.prop] = equi.status == '1' ? '1' : '0'
                            }
                        });
                    });
                }


            });
        }
        dataOfTable.value = list;
        paginationOption.value.totalCount = totalCount
        emit('setListContent', totalCount)
    }).catch(err => {
        ElMessage.error(err.message);
    }).finally(() => {
        loading.value = false
    })
}
const onAllSelection = (e) => {
    checkedSelected.value = e
    tableRef.value.toggleAllSelection()
}
// toggleAllSelection

defineExpose({
    loadData,
    onRefresh,
    onAllSelection,
    paginationOption
})
</script>
<style lang="less"></style>
